<!--
  @author: 善良的YWJ
  @Created by shanliangdeYWJ on 2020/11/02 16:49:03
  @file: loading.vue
  @description:
  ==================
  loading 加载组件
  改进参考 https://www.jianshu.com/p/64c36dd211eb
  ==================
  @link [Github](https://github.com/shanliangdeYWJ)
-->

<template>
  <div class="loading">
    <div class="load"></div>
    <div class="text">加载中...</div>
  </div>
</template>

<script>
export default {
  name: 'GFLoading'
};
</script>

<style lang='scss' scoped>
.loading .load {
  width: 60px;
  height: 60px;
  background-color: #1e8fc6;
  margin: 50px auto;
  animation: rotateplane 1.2s infinite ease-in-out;
}

.load-container .text {
  text-align: center;
}

@keyframes rotateplane {
  0% {
    transform: perspective(120px) rotateX(0deg) rotateY(0deg);
  }
  50% {
    transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
  }
  100% {
    transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
  }
}
</style>
